<template>
	<view :data-theme="themeStyle">
		<view class="content">
			<view class="cate-search">
				<view class="search-box">
					<input
						class="uni-input"
						maxlength="50"
						v-model="inputValue"
						confirm-type="search"
						@focus="inputFocus"
						@input="inputInput"
						@confirm="search()"
						:placeholder="$lang('inputPlaceholder')"
					/>
					<text class="iconfont iconIcon_search" @click="search()"></text>
				</view>
			</view>
			<view class="search-content">
				<!-- 历史搜索 -->
				<view class="history" v-if="historyList.length">
					<view class="history-box">
						<view class="history-top">
							<view class="title ns-font-size-base">{{ $lang('history') }}</view>
							<view class="icon iconfont iconicon7" @click="deleteHistoryList"></view>
						</view>
						<view class="history-bottom">
							<view class="history-li" v-for="(item, index) in historyList" :key="index" @click="otherSearch(item)" @longtap="deleteItem(item)">
								<button type="primary" class="btn-disabled" size="mini">{{ item }}</button>
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-else class="cart-empty"><ns-empty :isIndex="isIndex"></ns-empty></view> -->
			</view>
		</view>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js'
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
export default {
	data() {
		return {
			inputValue: '', //搜索框的值
			historyList: [], //历史搜索记录
			searchList: [], //搜索发现列表
			showSearch: true, //是否展示搜索发现
			alikeList: [],
			isIndex: false
		};
	},
	components: {
		nsShowToast
	},
	onLoad(options) {
		if (options.keyword) this.inputValue = options.keyword;
		uni.getStorageSync('search') ? '' : uni.setStorageSync('search', []);
	},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
		this.findHistoryList();
	},
	mixins: [globalConfig],
	methods: {
		//获取历史搜索记录
		findHistoryList() {
			this.historyList = uni.getStorageSync('search').reverse();
		},
		//删除所有历史记录
		deleteHistoryList() {
			uni.showModal({
				title: '提示',
				content: '确认删除全部历史记录？',
				success: res => {
					if (res.confirm) {
						uni.setStorageSync('search', []);
						this.findHistoryList();
					}
				}
			});
		},
		//删除历史记录的某一项
		deleteItem(e) {
			uni.showModal({
				title: '提示',
				content: '确认删除该条历史记录？',
				success: res => {
					if (res.confirm) {
						let array = uni.getStorageSync('search');
						let newArr = array.filter(v => {
							return v != e;
						});
						uni.setStorageSync('search', newArr);
						this.findHistoryList();
					}
				}
			});
		},
		//input框获取焦点事件
		inputFocus(e) {
			this.showScroll = false;
			if (this.inputValue.trim() != '') this.dataList = [];
		},
		//input框输入事件
		inputInput(e) {
			if (e.detail.value) {
			}
		},
		//点击其他列表搜索
		otherSearch(e) {
			this.inputValue = e;
			this.search();
		},
		//搜索
		search() {
			if (this.inputValue.trim() != '') {
				this.showScroll = true;

				// 对历史搜索处理,判断有无,最近搜索显示在最前
				let historyList = uni.getStorageSync('search');
				let array = [];
				if (historyList.length) {
					array = historyList.filter(v => {
						return v != this.inputValue.trim();
					});
					array.push(this.inputValue.trim());
				} else {
					array.push(this.inputValue.trim());
				}
				uni.setStorageSync('search', array);

				this.$util.redirectTo('/pages/goods/list/list', {
					keyword: this.inputValue.trim()
				});
			} else {
				this.$util.showToast({
					title: '搜索内容不能为空哦'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .fixed{position: relative;top:0}
/deep/ .empty {margin-top:0 !important}
.cart-empty{position:relative;top: -50%;padding-top: 54px;}
.content {
	width: 100vw;
	/* #ifdef MP */
	height: 100vh;
	/* #endif */
	/* #ifdef H5 */
	height: calc(100vh - 44px - 50px - env(safe-area-inset-bottom) - var(--status-bar-height));
	/* #endif */
	/* #ifdef APP-PLUS */
	height: calc(100vh - 44px - env(safe-area-inset-bottom));
	/* #endif */
	background: #ffffff;
}

.cate-search {
	width: 100%;
	height: 100rpx;
	background: #ffffff;
	padding: 10rpx $ns-padding;
	box-sizing: border-box;

	input {
		font-size: $ns-font-size-lg;
		height: 60rpx;
		padding: 15rpx 25rpx 15rpx 40rpx;
		line-height: 60rpx;
		width: calc(100% - 120rpx);
	}

	text {
		font-size: 50rpx;
		color: $ns-text-color-gray;
		width: 120rpx;
		text-align: center;
	}

	.search-box {
		width: 100%;
		height: 100%;
		background: $uni-bg-color-grey;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
	}
}

.search-content {
	box-sizing: border-box;
	background: #ffffff;
}

.history {
	width: 100%;
	padding: 0 $ns-padding;
	margin-bottom: 20rpx;
	box-sizing: border-box;

	.history-box {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 15rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		overflow: hidden;

		.history-top {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: bold;
			}

			.iconfont {
				color: $ns-text-color-gray;
				font-size: $ns-font-size-xxx-lg;
			}
		}

		.history-bottom {
			width: 100%;
			.history-li {
				display: inline-block;
				margin-right: 20rpx;
				margin-bottom: 15rpx;
				button[type='primary'] {
					line-height: 1.8;
					background: #f5f5f5 !important;
				}
			}
		}
	}

	.hidden-show {
		width: 100%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
	}
}

.search-alike {
	width: 100%;
	height: calc(100vh - 100rpx);

	padding: 0 $ns-padding;
	box-sizing: border-box;

	.alike-box {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: $ns-padding;
		overflow: hidden;
	}

	.alike-li {
		width: 100%;
		height: 80rpx;
		padding: 0 $ns-padding;
		box-sizing: border-box;
		border-bottom: 2rpx solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.iconjiantou-copy-copy-copy {
		font-size: $ns-font-size-xxx-lg;
		transform: rotate(15deg);
	}
}
</style>
